Call an member function implementing the {{#linkTo ...}} helper from javascript code
Posted
by
gonvaled
on Stack Overflow
See other posts from Stack Overflow
or by gonvaled
Published on 2013-10-30T09:45:50Z
Indexed on
2013/10/30
9:54 UTC
Read the original article
Hit count: 334
ember.js
|ember-router
I am trying to replace this navigation menu:
<nav>
{{#linkTo "nodes" }}<i class="icon-fixed-width icon-cloud icon-2x"></i> {{t generic.nodes}} {{grayOut "(temporal)"}}{{/linkTo}}
{{#linkTo "services" }}<i class="icon-fixed-width icon-phone icon-2x"></i> {{t generic.services}}{{/linkTo}}
{{#linkTo "agents" }}<i class="icon-fixed-width icon-headphones icon-2x"></i> {{t generic.agents}}{{/linkTo}}
{{#linkTo "extensions" }}<i class="icon-fixed-width icon-random icon-2x"></i> {{t generic.extensions}}{{/linkTo}}
{{#linkTo "voiceMenus" }}<i class="icon-fixed-width icon-sitemap icon-2x"></i> {{t generic.voicemenus}}{{/linkTo}}
{{#linkTo "queues" }}<i class="icon-fixed-width icon-tasks icon-2x"></i> {{t generic.queues}}{{/linkTo}}
{{#linkTo "contacts" }}<i class="icon-fixed-width icon-user icon-2x"></i> {{t generic.contacts}}{{/linkTo}}
{{#linkTo "accounts" }}<i class="icon-fixed-width icon-building icon-2x"></i> {{t generic.accounts}}{{/linkTo}}
{{#linkTo "locators" }}<i class="icon-fixed-width icon-phone-sign icon-2x"></i> {{t generic.locators}}{{/linkTo}}
{{#linkTo "phonelocations" }}<i class="icon-fixed-width icon-globe icon-2x"></i> {{t generic.phonelocations}}{{/linkTo}}
{{#linkTo "billing" }}<i class="icon-fixed-width icon-euro icon-2x"></i> {{t generic.billing}}{{/linkTo}}
{{#linkTo "profile" }}<i class="icon-fixed-width icon-cogs icon-2x"></i> {{t generic.profile}}{{/linkTo}}
{{#linkTo "audio" }}<i class="icon-fixed-width icon-music icon-2x"></i> {{t generic.audio}}{{/linkTo}}
{{#linkTo "editor" }}<i class="icon-fixed-width icon-puzzle-piece icon-2x"></i> {{t generic.node_editor}}{{/linkTo}}
</nav>
With a more dynamic version. What I am trying to do is to reproduce the html inside Ember.View.render, but I would like to reuse as much Ember functionality as possible. Specifically, I would like to reuse the {{#linkTo ...}} helper, with two goals:
- Reuse existing html rendering implemented in the
{{#linkTo ...}}helper - Get the same routing support that using the
{{#linkTo ...}}in a template provides.
How can I call this helper from within javascript code? This is my first (incomplete) attempt. The template:
{{view SettingsApp.NavigationView}}
And the view:
var trans = Ember.I18n.t;
var MAIN_MENU = [
{ 'linkTo' : 'nodes', 'i-class' : 'icon-cloud', 'txt' : trans('generic.nodes') },
{ 'linkTo' : 'services', 'i-class' : 'icon-phone', 'txt' : trans('generic.services') },
];
function getNavIcon (data) {
var linkTo = data.linkTo, i_class = data['i-class'], txt = data.txt;
var html = '<i class="icon-fixed-width icon-2x ' + i_class + '"></i> ' + txt;
return html;
}
SettingsApp.NavigationView = Ember.View.extend({
menu : MAIN_MENU,
render: function(buffer) {
for (var i=0, l=this.menu.length; i<l; i++) {
var data = this.menu[i];
// TODO: call the ember function implementing the {{#linkTo ...}} helper
buffer.push(getNavIcon(data));
}
return buffer;
}
});
© Stack Overflow or respective owner
